<template>
  <div class="register">
    <el-card class="box-card">
      <div class="header">卖家后台管理</div>
      <div class="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" @keyup.enter.native="login">
          <el-form-item prop="userName">
            <el-input v-model="form.userName">
              <span slot="prefix">用户名：</span>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password">
              <span slot="prefix">密码：</span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.mobile">
              <span slot="prefix">手机：</span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.email">
              <span slot="prefix">邮箱：</span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.sex">
              <span slot="prefix">性别：</span>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-button @click="register">注册</el-button>
      </div>
      <div class="login" @click="$router.push('/login')">登录</div>
    </el-card>
  </div>
</template>

<script>
  import {addAdmin} from "../../api/api"

  export default {
    name: "reg",
    data() {
      return {
        form: {
          userName: '',
          password: ''
        },  //表单数据
        rules: {  //表单验证
          userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        },
        img: '',  //图片验证码路径
      }
    },
    created() {

    },
    methods: {
      //登录
      register() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            const res = await addAdmin(this.form)
            this.$message.success('注册成功')
            this.$router.push('/login')
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .register {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/imgs/login_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .el-card {
      padding: 30px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #eaeaea;
      width: 380px;

      .header {
        margin-bottom: 20px;
        text-align: center;
        font-size: 20px;
        color: #a5b842;
        font-weight: bold;
      }

      .content {
        .el-input {
          background: #e9e8ee;
        }

        .verifyCode {
          .el-input {
            width: 156px;
          }

          img {
            width: 100px;
            height: 30px;
            margin-left: 20px;
          }
        }
      }

      .footer {
        .el-button {
          background: #a5b842;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          width: 100%;
        }
      }
    }

    .login {
      text-align: right;
      color: #a5b842;
      font-size: 14px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
</style>
